<template>
  <div class="container">
    <el-container style="height: 800px; border: 2px #eee">
        <el-header style="height:100px">
        <img class="logo" alt="logo" :src="require('./../../assets/logo1.png')"/>
            <div class="avator" style="text-align: right; float:right">
                <div>
                <el-avatar :size="65" src="https://ftp.bmp.ovh/imgs/2021/06/8691b8db5223ac81.jpg"></el-avatar>
                </div>
            </div>
        </el-header>
            <div class="container1" style="background-color: rgb(255,255,255);">
                <el-row type="flex" align="middle" justify="justify">
                    <el-col :offset="1" :span="4">
                        <el-button size="mini" round @click="$router.push({path: '/admin/home'})">
                            <i class="el-icon-arrow-left"/>
                        </el-button>
                    </el-col>
                    <el-col :span="10" :offset="3">
                        <el-menu :default-actice="activeIndex" class="el-menu" mode="horizontal" @select="handleSelect" style="border: hidden"> 
                            <el-menu-item index="1" style="margin-left:60px">编辑</el-menu-item>
                            <el-menu-item index="2" style="margin-left:50px">发布</el-menu-item>
                            <el-menu-item index="3" style="margin-left:50px">统计</el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
            </div>

            <div class="publish-btn-view" v-if="!publishStatus">
                <el-button
                    @click="publishProject"
                    size="medium"
                    class="publish-btn"
                    type="primary" style="margin-top:200px; margin-left:660px"><i class="el-icon-document-checked el-icon--right">开始发布</i></el-button>
            </div>

            <div class="publish-finish-view" v-if="publishStatus">
                <el-row type="flex" align="middle">
                    <el-col :span="20" style="">
                        <div style="display: flex;justify-content: center">
                            <div class="icon-view">
                                <i class="el-icon-check success-icon"/>
                            </div>
                        </div>
                        <div>
                            <p class="success-title">恭喜您，发布成功！</p>
                        </div>
                        <div>
                            <p class="link-text"> {{ writeLink }}</p>
                        </div>
                        <el-row>

                  <el-col :span="6" :offset="3">
                      <el-button v-clipboard:copy="writeLink"
                                  v-clipboard:success="()=>{this.msgSuccess('复制成功')}"
                                  v-clipboard:error="()=>{this.msgError('复制失败')}" type="primary">复制链接
                      </el-button>
                  </el-col>
                  <el-col :span="6" >
                      <el-button
                          @click="stopPublishProject"
                          type="danger">停止发布
                      </el-button>
                  </el-col>
                  <el-col :span="6">
                      <el-button
                          @click="toFeedbackPageHandle"
                          type="warning">查看反馈
                      </el-button>
                  </el-col>
              </el-row>
          </el-col>
        </el-row>
      </div>
    </el-container>
  </div>
</template>

<script>
import {postKeyValueRequest,postRequest,getRequest,getRequest2} from '@/api/api'
export default {
  data() {
    return {
      activeIndex:'2',
      publishStatus: false,
    }
  },
  mounted() {
        let url = window.location.protocol + '//' + window.location.host
        this.writeLink = `${url}/#/project/write?key=${this.$route.query.key}`
        console.log(this.writeLink)
        // this.getProjectStatus()
  },
  methods:{
    handleSelect(key,keyPath){
        var url = window.location.href;
        var keys = url.split('=')[1];
        if(key == 1){
          this.$router.push({path: '/admin/create', query: {key: keys}})
        }else if(key == 2){
          location.reload()
        }else if(key == 3){
          this.$router.push({path: '/admin/statistics', query: {key: keys}})
        }
    },
    publishProject(){
      this.publishStatus = true;
      console.log(window.location.protocol)
      console.log(window.location.host)
      getRequest(`/project/change/stats?key=${this.$route.query.key}`).then(resp=>{
        console.log(resp)
      })
      alert("发布成功！");
    },
    stopPublishProject(){
        getRequest(`/project/change/toStop?key=${this.$route.query.key}`).then(resp=>{
            console.log(resp)
        })
        location.reload()
    },
    toFeedbackPageHandle(){
        this.$router.push(`/admin/statistics?key=${this.$route.query.key}`).then(resp=>{
            console.log(resp)
        })
    }
  }
}
</script>

<style>
.publish-finish-view {
    margin-top: 150px;
    margin-left: 510px;
    width: 500px;
    height: 200px;
    text-align: center;
}
.icon-view {
        width: 59px;
        height: 59px;
        border-radius: 100px;
        background-color: #0076FF;
        display: flex;
        align-items: center;
        align-content: center;
        justify-items: center;
        justify-content: center;
    }

.success-icon {
    text-align: center;
    color: white;
    font-size: 30px;
}

.success-title {
    color: rgba(16, 16, 16, 100);
    font-size: 28px;
}

.link-text {
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
}
</style>
